<template>
  <div class="header_con" :class="{'isFixed':isFixed}">
    <template v-if="isSearch">
      <div class="searchBar" @click="boxFocus($event)">
        <form action="#" class="searchForm" @submit.prevent="clickSearch('submit')">
          <span class="searchIcon" @click="clickSearch('submit')"><i class="iconfont icon-sousuo- right"></i></span>
          <input type="search" class="searchBox" name="search" v-model="value" :placeholder="placeholder" ref="searchInput"  key="is-search">
        </form>
      </div>
    </template>
    <!-- <template v-else> -->
    <div class="go_back" @click="goBack" v-if="backShow"><i class="icon iconfont icon-left"></i>返回</div>
    <div class="go_back" @click="goCenter" v-if="backCenter"><i class="icon iconfont icon-left"></i>返回</div>
    <div class="go_back" @click="goHome" v-if="backHome"><i class="icon iconfont icon-left"></i>首页</div>
    <div class="hd_title">{{headText}}</div>
    <div class="top_email" :class="{'has_message':message}" v-if="mesShow" @click="$router.push({path: 'infoList'})"><a><i class="icon iconfont icon-openemail"></i></a></div>
    <div class="is_done" v-if="doneShow" @click="goFriendDetail">完成</div>
    <div  v-if="cardShow" @click="clickE" class="change_card">{{select?'确定':'选券'}}</div>
    <div  v-else-if="isSearch" @click="cacheSearch" class="change_card">取消</div>
    <div  v-else-if="searchShow" @click="clickSearch('search')" class="change_card"><i class="iconfont icon-sousuo- right"></i></div>
  </div>
</template>
<script>
    import * as types from 'src/vuex/types.js'
    import { mapState } from 'vuex'
    export default {
        data:() => ({
          isSearch: false,
          value: ''
        }),
        name:"header",
        props: {
          'searchShow': {
            type: Boolean,
            default: false
          },
          'head-text': {
            type: String,
            default: '芸券'
          },
          'back-show': {
            type: Boolean,
            default: false
          },
          'mes-show': {
            type: Boolean,
            default: false
          },
           'done-show': {
             type: Boolean,
             default:false,
           },
          'back-center': {
            type: Boolean,
            default: false
          },
           'back-home': {
            type: Boolean,
            default: false
          },
          'isFixed':{
            type: Boolean,
            default: false
          },
          'select': Boolean,
          'message': Boolean,
          placeholder: String
        },
        computed:{
           ...mapState({
                cardShow:state => state.com.cardShow
            })
        },
        methods:{
            goBack:function(){
                // window.history.back(-1);
                this.$router.go(-1);
            },
            goCenter:function(){
                this.$router.push({'path': '/center'});
            },
            goHome:function(){
            	 this.$router.push({'path': '/home'});
            },
            goFriendDetail(){
                window.history.back(-1);
            },
            clickE:function() {
                this.$emit("clickE");
            },
            clickSearch: function(type) {
              if (type === 'search') {
                this.value = "";
                this.isSearch = !this.isSearch;
                this.$emit('show-cache-search', type)
              } else if (type === 'submit') {
                this.$emit('click-search', this.value)
              }
            },

            boxFocus: function(e) {
              this.$refs.searchInput.focus()
            },
            cacheSearch: function() {
              this.value = "";
              this.isSearch = !this.isSearch;
              this.$emit('cache-search')
            }
        }
    }
</script>
<style scoped>
  .isFixed {
    position: fixed!important;
    top: 0;
    z-index: 100;
  }
    .header_con{width: 100%;height: 48px;line-height:48px;background: #000;color:#fff;text-align: center; position: relative;font-size: 1.2rem;z-index: 1;}
    .top_email{position: absolute;right: 1rem;top:0;}
    .top_email .icon{font-size:1.6rem;}
    .top_email a{color:#fff;display: block;}
    .has_message:after{content: "";position: absolute;top:1rem;right:-.1rem;z-index:1;width: .6rem;height: .6rem;background: #f00;border-radius: .6rem;}
    .go_back{position: absolute;left:.667rem;top:0;}
    .is_done{
      position:absolute;right:.667rem;top:0;color:#ec4e8a;
    }
    .change_card{position: absolute;right:1.334rem;top:0;color: #ec4e8a}
    .iconfont {font-size: 1.4rem;}
    .searchForm {
      background-color: rgba(255,255,255,0.2);
      border-radius: 1.2rem;
      overflow: hidden;
      width: 80%;
    }
    .searchBar {
      text-align: left;
      padding-left: 1rem;
      padding-top: 0.4rem;
      box-sizing: border-box;
    }
    .searchIcon {
      /*display: inline-block;*/
      display: block;
      float: left;
      width: 2rem;
      height: 2.1rem;
      line-height: 2.4rem;
      border-radius: 1.2rem 0 0 1.2rem;
      /*background-color: rgba(255,255,255,0.2);*/
      color: #ec4e8a;
    }
    .searchIcon .iconfont {font-size: 1.4rem;}
    .searchBox {
      width: 84%;
      padding: 0 .6rem;
      box-sizing: border-box;
      height: 2.1rem;
      float: left;
      border-radius: 0 1.2rem 1.2rem 0;
      background-color: rgba(255,255,255,0);
      color: #fff;
      font-size: 1rem;
    }
    ::-webkit-search-cancel-button { display: none; }
    .hd_title{padding:0 5rem;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
</style>
